<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>登录页面</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      min-height: 100vh;
      background: linear-gradient(#03a9f4, #03a9f4 10%, #fff 50%, #fff 100%);
    }

    .card_yuan {
      position: relative;
      top: 30%;
      left: -25%;
      transform: translate(-150%, -50%);
      width: 200px;
      height: 200px;
      background-color: #e7609e;
      border-radius: 50%;
      z-index: 1;
      animation: float 5s ease-in-out infinite;
    }

    .card_yuan:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 120%;
      height: 120%;
      background-color: #2ec3e7;
      filter: drop-shadow(0 0 10px #2ec3e7);

      border-radius: 50%;
      transform: translate(160%, 120%);
      z-index: 1;
    }

    .card_yuan:after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      width: 90%;
      height: 90%;
      margin-bottom: 0px;
      background-color: #d54bf3;
      border-radius: 50%;
      transform: translate(170%, -130%);
      filter: drop-shadow(0 0 10px #d54bf3);

      z-index: 1;
    }

    @keyframes float {
      0% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-20px);
      }

      100% {
        transform: translateY(0);
      }
    }

    #box_container {
      position: fixed;
      top: 0;
      left: 0;
      transform: translate(0%, 0%);
      width: 100%;
      height: 100vh;
      background: rgba(0, 0, 0, 0);
      backdrop-filter: blur(15px);
      border-radius: 0px;
      z-index: 9;
    }

    .card_dl {
      position: relative;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: 300px;
      background: rgba(0, 0, 0, 0.1);
      border-top: 1px solid rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(25px);
      border-radius: 20px;
      z-index: 999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .card_dl::after {
      position: fixed;
      content: "";
      top: -150px;
      right: -100px;
      width: 160px;
      height: 160px;
      background: #faf9f9;
      filter: drop-shadow(0 0 10px #faf9f9);
      border-radius: 50%;
      animation: float 5s ease-in-out infinite;
    }

    .card_dl p {
      top: 50%;
      left: 50%;
      background-image: linear-gradient(to right, #f7f0ac, #acf7f0, #f0acf7);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 7vw;
      font-weight: 900;
      transform: translate(-105px, -20px);
    }

    input[type="text"],
    input[type="password"] {
      position: relative;
      top: 50%;
      left: 45.5%;
      width: 80%;
      padding: 10px;
      margin: 15px;
      border-radius: 5px;
      border: none;
      background: rgba(255, 255, 255, 0.5);
      transform: translate(-50%, -100px);
      font-size: 1.2rem;
      color: #333;
    }




    #yiyan {
      width: 100%;
      font-size: 1.3vw;
      font-weight: 900;
      color: #fff;
      top: 50%;
      left: 50%;
      transform: translate(25px, -55px);
    }

    #slide-kp {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      padding: 0;
      background: linear-gradient(#03a9f4, #03a9f4 10%, #fff 50%, #fff 100%);
      border-radius: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      transition: all 0.4s ease-in-out;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 20px;
      font-weight: 900;
      opacity: 0;
      z-index: 999;
    }

    #slide-kp.active {
      width: 100%;
      height: 100%;
      padding: 30px;
      opacity: 1;
    }

    h1,
    h5 {
      padding: 30px;
    }

    ::placeholder {
      color: gray;
      font-size: 15px;
    }

    /* 立方体 Start */
    .pyramid-loader {
      position: fixed;
      left: 10%;
      width: 300px;
      height: 300px;
      display: block;
      transform-style: preserve-3d;
      transform: rotateX(-20deg);
    }

    .wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      animation: spin 4s linear infinite;
    }

    @keyframes spin {
      100% {
        transform: rotateY(360deg);
      }
    }

    .pyramid-loader .wrapper .side {
      width: 70px;
      height: 70px;
      /* you can choose any gradient or color you want */
      /* background: radial-gradient( #2F2585 10%, #F028FD 70%, #2BDEAC 120%); */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      transform-origin: center top;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }

    .pyramid-loader .wrapper .side1 {
      transform: rotateZ(-30deg) rotateY(90deg);
      background: conic-gradient(#2BDEAC, #F028FD, #D8CCE6, #2F2585);
    }

    .pyramid-loader .wrapper .side2 {
      transform: rotateZ(30deg) rotateY(90deg);
      background: conic-gradient(#2F2585, #D8CCE6, #F028FD, #2BDEAC);
    }

    .pyramid-loader .wrapper .side3 {
      transform: rotateX(30deg);
      background: conic-gradient(#2F2585, #D8CCE6, #F028FD, #2BDEAC);
    }

    .pyramid-loader .wrapper .side4 {
      transform: rotateX(-30deg);
      background: conic-gradient(#2BDEAC, #F028FD, #D8CCE6, #2F2585);
    }

    .pyramid-loader .wrapper .shadow {
      width: 60px;
      height: 60px;
      background: #8B5AD5;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      transform: rotateX(90deg) translateZ(-40px);
      filter: blur(12px);
    }

    /* 立方体 End */

    /* 登录 按钮 Start*/
    .voltage-button {
      position: relative;
      height: 3rem;
      width: 14rem;
      z-index: 120;
      top: 80%;
      left: 20%;
      transform: translate(-50%, -50%);
    }

    .voltage-button button {
      color: white;
      background: #0d1127;
      border-radius: 6rem;
      height: 3rem;
      width: 14rem;
      border: 1px solid #5978f3;
      font-size: 1.2rem;
      line-height: 1em;
      letter-spacing: 0.075em;
      transition: background 0.3s;
    }

    .voltage-button button:hover {
      cursor: pointer;
      background: #0f1c53;
    }

    .voltage-button button:hover+svg,
    .voltage-button button:hover+svg+.dots {
      opacity: 1;
    }

    .voltage-button svg {
      display: block;
      position: absolute;
      top: -0.75em;
      left: -0.25em;
      height: 4.5rem;
      width: 15rem;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.4s;
      transition-delay: 0.1s;
    }

    .voltage-button svg path {
      stroke-dasharray: 100;
      filter: url("#glow");
    }

    .voltage-button svg path.line-1 {
      stroke: #f6de8d;
      stroke-dashoffset: 0;
      animation: spark-1 3s linear infinite;
    }

    .voltage-button svg path.line-2 {
      stroke: #6bfeff;
      stroke-dashoffset: 500;
      animation: spark-2 3s linear infinite;
    }

    .voltage-button .dots {
      opacity: 0;
      transition: opacity 0.3s;
      transition-delay: 0.4s;
    }

    .voltage-button .dots .dot {
      width: 1rem;
      height: 1rem;
      background: white;
      border-radius: 100%;
      position: absolute;
      opacity: 0;
    }

    .voltage-button .dots .dot-1 {
      top: 0;
      left: 20%;
      animation: fly-up 3s linear infinite;
    }

    .voltage-button .dots .dot-2 {
      top: 0;
      left: 55%;
      animation: fly-up 3s linear infinite;
      animation-delay: 0.5s;
    }

    .voltage-button .dots .dot-3 {
      top: 0;
      left: 80%;
      animation: fly-up 3s linear infinite;
      animation-delay: 1s;
    }

    .voltage-button .dots .dot-4 {
      bottom: 0;
      left: 30%;
      animation: fly-down 3s linear infinite;
      animation-delay: 2.5s;
    }

    .voltage-button .dots .dot-5 {
      bottom: 0;
      left: 65%;
      animation: fly-down 3s linear infinite;
      animation-delay: 1.5s;
    }

    @keyframes spark-1 {
      to {
        stroke-dashoffset: -1000;
      }
    }

    @keyframes spark-2 {
      to {
        stroke-dashoffset: -500;
      }
    }

    @keyframes fly-up {
      0% {
        opacity: 0;
        transform: translateY(0) scale(0.2);
      }

      5% {
        opacity: 1;
        transform: translateY(-1.5rem) scale(0.4);
      }

      10%,
      100% {
        opacity: 0;
        transform: translateY(-3rem) scale(0.2);
      }
    }

    @keyframes fly-down {
      0% {
        opacity: 0;
        transform: translateY(0) scale(0.2);
      }

      5% {
        opacity: 1;
        transform: translateY(1.5rem) scale(0.4);
      }

      10%,
      100% {
        opacity: 0;
        transform: translateY(3rem) scale(0.2);
      }
    }

    /* 登录按钮 End */
  </style>
</head>

<body>
  <div id="box_container">
    <!-- 立方体 -->
    <div class="pyramid-loader">
      <div class="wrapper">
        <span class="side side1"></span>
        <span class="side side2"></span>
        <span class="side side3"></span>
        <span class="side side4"></span>
        <span class="shadow"></span>
      </div>
    </div>
    <!-- 立方体 -->

    <div class="card_yuan"></div>
    <div class="card_dl">
      <p>Login</p>
      <form>
        <input type="text" placeholder="Please enter an account" id="username" value="abcde" />
        <input type="password" placeholder="Please input a password" id="password" value="123456" />
        <!-- 登录按钮 Start -->
        <div class="voltage-button">
          <button type="submit" id="loginBtn">登录 Login</button>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 234.6 61.3"
            preserveAspectRatio="none" xml:space="preserve">
            <filter id="glow">
              <feGaussianBlur class="blur" result="coloredBlur" stdDeviation="2"></feGaussianBlur>
              <feTurbulence type="fractalNoise" baseFrequency="0.075" numOctaves="0.3" result="turbulence">
              </feTurbulence>
              <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="30" xChannelSelector="R"
                yChannelSelector="G" result="displace"></feDisplacementMap>
              <feMerge>
                <feMergeNode in="coloredBlur"></feMergeNode>
                <feMergeNode in="coloredBlur"></feMergeNode>
                <feMergeNode in="coloredBlur"></feMergeNode>
                <feMergeNode in="displace"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
              </feMerge>
            </filter>
            <path class="voltage line-1"
              d="m216.3 51.2c-3.7 0-3.7-1.1-7.3-1.1-3.7 0-3.7 6.8-7.3 6.8-3.7 0-3.7-4.6-7.3-4.6-3.7 0-3.7 3.6-7.3 3.6-3.7 0-3.7-0.9-7.3-0.9-3.7 0-3.7-2.7-7.3-2.7-3.7 0-3.7 7.8-7.3 7.8-3.7 0-3.7-4.9-7.3-4.9-3.7 0-3.7-7.8-7.3-7.8-3.7 0-3.7-1.1-7.3-1.1-3.7 0-3.7 3.1-7.3 3.1-3.7 0-3.7 10.9-7.3 10.9-3.7 0-3.7-12.5-7.3-12.5-3.7 0-3.7 4.6-7.3 4.6-3.7 0-3.7 4.5-7.3 4.5-3.7 0-3.7 3.6-7.3 3.6-3.7 0-3.7-10-7.3-10-3.7 0-3.7-0.4-7.3-0.4-3.7 0-3.7 2.3-7.3 2.3-3.7 0-3.7 7.1-7.3 7.1-3.7 0-3.7-11.2-7.3-11.2-3.7 0-3.7 3.5-7.3 3.5-3.7 0-3.7 3.6-7.3 3.6-3.7 0-3.7-2.9-7.3-2.9-3.7 0-3.7 8.4-7.3 8.4-3.7 0-3.7-14.6-7.3-14.6-3.7 0-3.7 5.8-7.3 5.8-2.2 0-3.8-0.4-5.5-1.5-1.8-1.1-1.8-2.9-2.9-4.8-1-1.8 1.9-2.7 1.9-4.8 0-3.4-2.1-3.4-2.1-6.8s-9.9-3.4-9.9-6.8 8-3.4 8-6.8c0-2.2 2.1-2.4 3.1-4.2 1.1-1.8 0.2-3.9 2-5 1.8-1 3.1-7.9 5.3-7.9 3.7 0 3.7 0.9 7.3 0.9 3.7 0 3.7 6.7 7.3 6.7 3.7 0 3.7-1.8 7.3-1.8 3.7 0 3.7-0.6 7.3-0.6 3.7 0 3.7-7.8 7.3-7.8h7.3c3.7 0 3.7 4.7 7.3 4.7 3.7 0 3.7-1.1 7.3-1.1 3.7 0 3.7 11.6 7.3 11.6 3.7 0 3.7-2.6 7.3-2.6 3.7 0 3.7-12.9 7.3-12.9 3.7 0 3.7 10.9 7.3 10.9 3.7 0 3.7 1.3 7.3 1.3 3.7 0 3.7-8.7 7.3-8.7 3.7 0 3.7 11.5 7.3 11.5 3.7 0 3.7-1.4 7.3-1.4 3.7 0 3.7-2.6 7.3-2.6 3.7 0 3.7-5.8 7.3-5.8 3.7 0 3.7-1.3 7.3-1.3 3.7 0 3.7 6.6 7.3 6.6s3.7-9.3 7.3-9.3c3.7 0 3.7 0.2 7.3 0.2 3.7 0 3.7 8.5 7.3 8.5 3.7 0 3.7 0.2 7.3 0.2 3.7 0 3.7-1.5 7.3-1.5 3.7 0 3.7 1.6 7.3 1.6s3.7-5.1 7.3-5.1c2.2 0 0.6 9.6 2.4 10.7s4.1-2 5.1-0.1c1 1.8 10.3 2.2 10.3 4.3 0 3.4-10.7 3.4-10.7 6.8s1.2 3.4 1.2 6.8 1.9 3.4 1.9 6.8c0 2.2 7.2 7.7 6.2 9.5-1.1 1.8-12.3-6.5-14.1-5.5-1.7 0.9-0.1 6.2-2.2 6.2z"
              fill="transparent" stroke="#fff"></path>
            <path class="voltage line-2"
              d="m216.3 52.1c-3 0-3-0.5-6-0.5s-3 3-6 3-3-2-6-2-3 1.6-6 1.6-3-0.4-6-0.4-3-1.2-6-1.2-3 3.4-6 3.4-3-2.2-6-2.2-3-3.4-6-3.4-3-0.5-6-0.5-3 1.4-6 1.4-3 4.8-6 4.8-3-5.5-6-5.5-3 2-6 2-3 2-6 2-3 1.6-6 1.6-3-4.4-6-4.4-3-0.2-6-0.2-3 1-6 1-3 3.1-6 3.1-3-4.9-6-4.9-3 1.5-6 1.5-3 1.6-6 1.6-3-1.3-6-1.3-3 3.7-6 3.7-3-6.4-6-6.4-3 2.5-6 2.5h-6c-3 0-3-0.6-6-0.6s-3-1.4-6-1.4-3 0.9-6 0.9-3 4.3-6 4.3-3-3.5-6-3.5c-2.2 0-3.4-1.3-5.2-2.3-1.8-1.1-3.6-1.5-4.6-3.3s-4.4-3.5-4.4-5.7c0-3.4 0.4-3.4 0.4-6.8s2.9-3.4 2.9-6.8-0.8-3.4-0.8-6.8c0-2.2 0.3-4.2 1.3-5.9 1.1-1.8 0.8-6.2 2.6-7.3 1.8-1 5.5-2 7.7-2 3 0 3 2 6 2s3-0.5 6-0.5 3 5.1 6 5.1 3-1.1 6-1.1 3-5.6 6-5.6 3 4.8 6 4.8 3 0.6 6 0.6 3-3.8 6-3.8 3 5.1 6 5.1 3-0.6 6-0.6 3-1.2 6-1.2 3-2.6 6-2.6 3-0.6 6-0.6 3 2.9 6 2.9 3-4.1 6-4.1 3 0.1 6 0.1 3 3.7 6 3.7 3 0.1 6 0.1 3-0.6 6-0.6 3 0.7 6 0.7 3-2.2 6-2.2 3 4.4 6 4.4 3-1.7 6-1.7 3-4 6-4 3 4.7 6 4.7 3-0.5 6-0.5 3-0.8 6-0.8 3-3.8 6-3.8 3 6.3 6 6.3 3-4.8 6-4.8 3 1.9 6 1.9 3-1.9 6-1.9 3 1.3 6 1.3c2.2 0 5-0.5 6.7 0.5 1.8 1.1 2.4 4 3.5 5.8 1 1.8 0.3 3.7 0.3 5.9 0 3.4 3.4 3.4 3.4 6.8s-3.3 3.4-3.3 6.8 4 3.4 4 6.8c0 2.2-6 2.7-7 4.4-1.1 1.8 1.1 6.7-0.7 7.7-1.6 0.8-4.7-1.1-6.8-1.1z"
              fill="transparent" stroke="#fff"></path>
          </svg>
          <div class="dots">
            <div class="dot dot-1"></div>
            <div class="dot dot-2"></div>
            <div class="dot dot-3"></div>
            <div class="dot dot-4"></div>
            <div class="dot dot-5"></div>
          </div>
        </div>
    </div>
    <!-- 登录按钮 End -->
    </form>
    <i id="yiyan">开心是一天,不开心也是,不如开心每一天。</i><!--这是随机一言-->
  </div>
  </div>
  <!-- 禁止浏览器打开控制台 -->
  <script src="./index.js"></script>
  <script>
    const messageElement = document.getElementById("yiyan");
    const messages = [
      "活在风浪里，不怕被打倒。",
      "生命不止，继续跑下去。",
      "每天都要向前一步。",
      "人生没有彩排，只有现场直播。",
      "不努力怎么知道自己有多菜。",
      "开心是一天,不开心也是一天,不如开心每一天。",
      "前方路途坎坷，但依旧前行。",
      "别让梦想只停留在梦里。",
      "昨天已经过去，明天尚未到来，今天就是一个好日子。",
    ];

    function randomMessage() {
      const index = Math.floor(Math.random() * messages.length);
      messageElement.textContent = messages[index];
    }
    randomMessage();

    document.getElementById("loginBtn").addEventListener("click", function (event) {
      event.preventDefault();

      const username = document.getElementById("username").value;
      const password = document.getElementById("password").value;
      const slidekp = document.getElementById("slide-kp");
      if (username === "abcde" && password === "123456") {
        // 存储登录状态并存入当前时间
        localStorage.setItem(
          "isLogin",
          JSON.stringify({ isLogin: true, time: new Date().getTime() })
        );
        window.location.href = "./login-last.html";
      } else {
        alert("账号或密码错误，请重新输入！");
      }
    });

    window.addEventListener("popstate", function (event) {
      if (slidekp.classList.contains("active")) {
        slidekp.classList.remove("active");
        history.pushState(null, null, location.href);
      }
    });

    history.pushState(null, null, location.href);
  </script>
</body>

</html>